<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 新增角色按钮 -->
        <el-button type="primary" style="margin-bottom:20px;" @click="addFn">+ 新增角色</el-button>
        <!-- 角色管理布局 -->
        <el-table border="" :data="roleList" height="calc(100vh - 247px)">
          <el-table-column align="center" type="index" label="序号" width="120" />
          <el-table-column align="center" prop="title" label="角色名称" width="240" />
          <el-table-column align="center" prop="description" label="描述" />
          <el-table-column align="center" label="操作">
            <template v-slot="{row}">
              <el-button size="small" type="success" @click="assignPer(row.id)">分配权限</el-button>
              <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination layout=" sizes,total, prev, pager, next, jumper" :page-sizes="[2, 5, 15, 30]" :page-size="limit" :current-page="start" :total="total" @size-change="handleSizeChange" @current-change="changePage" />
        </el-row>
      </el-card>
      <!-- 分配权限弹框 -->
      <assignPerm :id="roleId" ref="assignForm" :show-dialog.sync="showPerDialog" />
      <!-- 编辑/增加角色弹窗 -->
      <editRole ref="editFrom" :show-dialog.sync="showDialog" />
    </div>
  </div>
</template>

<script>
import assignPerm from './compoment/assignPerm.vue'
import editRole from './compoment/editRole.vue'
import { getRoleLists, getRoleCounts, delRole } from '@/api/role'
export default {
  components: {
    assignPerm,
    editRole
  },
  data() {
    return {
      showDialog: false,
      showPerDialog: false,
      limit: 5, /* 获取的最大条数 */
      start: 0, /* 开始获取的位置 第一页是0 第二页是10 第三页是20 页数乘以limit*/
      total: 0,
      roleList: [],
      permDetail: [],
      roleId: ''
    }
  },
  created() {
    this.getRoleLists()
  },
  methods: {
    /* 添加角色 */
    addFn() {
      /* 显示弹框 111*/
      this.showDialog = true
    },
    /* 删除角色 */
    delFn(id) {
      this.$confirm('确定删除吗', '删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async() => {
        if (this.roleList.length === 1 && this.start > 0) {
          this.start = this.start - 10
        }
        await delRole(id)
        this.$message.success('删除成功')
        this.getRoleLists()
      }).catch(() => {
        console.log('取消删除')
      })
    },
    /* 编辑角色 */
    editFn(id) {
      // console.log('id', id)
      this.showDialog = true
      this.$refs.editFrom.getRoleDetailById(id)
    },
    /* 封装获取角色列表的函数 */
    async getRoleLists() {
      this.roleList = await getRoleLists({
        _limit: this.limit,
        _start: this.start
      })
      this.total = await getRoleCounts()
      // console.log(this.roleList)
    },
    /* 点击分配权限 弹出弹窗 */
    assignPer(id) {
      /* 显示弹框 */
      this.showPerDialog = true
      /* 实现数据回显 */
      /* 获取当前角色详情 */
      this.$refs.assignForm.getRoleDetailById(id)
    },
    /* 页面数量改变*/
    handleSizeChange(size) {
      // console.log(size)
      // this.size = size
      this.limit = size
      // console.log('this.limit', this.limit)
      /* 修改数据重新调用接口 */
      this.getRoleLists()
    },
    /* 页码改变 */
    changePage(page) {
      // console.log(page)
      // this.page = page
      this.start = (page - 1) * this.limit
      // console.log('this.start', this.start)
      /* 修改数据重新调用接口 */
      this.getRoleLists()
    }
  }

}
</script>
<style>

</style>

